<!DOCTYPE html>
<html lang="en">
	<head>
		<title>中秋节快乐！</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			html,body{
                width:100%;
                height:100%
            }

			body {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
				background: url(img/9.jpg) no-repeat;
				background-size: 100%;
			}

			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display: block;
			}

			input {
				/* color: #f00;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer */
				border:1px solid #b42323;
                box-shadow: 0 1px 2px #e99494 inset,0 -1px 0 #954b4b inset,0 -2px 3px #e99494 inset;
                background: -webkit-linear-gradient(top,#d53939,#b92929);
                background: -moz-linear-gradient(top,#d53939,#b92929);
                background: linear-gradient(top,#d53939,#b92929);
				height: 50px;
				width: 100px;
			}
			#video {
			    position: absolute;
			    top: 0;
			    left: 0;
			    z-index: -1;
			}
			.footer {
			    position: fixed;
			    bottom: 10px;
			
			    width: 100%;
			    text-align: center;
			
			    z-index: 100000;
					
			}
			progress
			{
          color:orange; /*兼容IE10的已完成进度背景*/
          border:none;
          background:#d7d7d7;/*这个属性也可当作Chrome的已完成进度背景，只不过被下面的::progress-bar覆盖了*/      
      }

      progress::-webkit-progress-bar
      {
          background:#d7d7d7;
      }

      progress::-webkit-progress-value,
			progress::-moz-progress-bar
     {
     background:orange;
     }
		</style>
	</head>

	<body>
		<!-- 		<div id="info">
		<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - OBJLoader + MTLLoader
		</div> -->
		<video id="video" playsinline="">

		</video>

		<div class="footer">
			<input type="button" value="开启AR" id="openCamera" />
			<!-- <progress max="100" value="0" id="pg">正在加载模型中。。。。</progress> -->
			<p id="jindu"></p>
		</div>
		<script src="libs/three/three.min.js"></script>

		<script src="js/loaders/DDSLoader.js"></script>
		<script src="js/loaders/MTLLoader.js"></script>
		<script src="js/loaders/OBJLoader.js"></script>

		<script src="js/Detector.js"></script>
		<script src="js/stats.min.js"></script>

		<!-- <script src="js/webar.js" type="text/javascript" charset="utf-8"></script> -->
		<script>
			var container, stats;
			var camera, scene, renderer;
			var mouseX = 0,
				mouseY = 0;
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var video = document.getElementById('video');
			var constraints = {
				audio: false,
				video: {
					width: window.innerWidth,
					height: window.innerHeight
				},
			};
			// 			init();
			// 			animate();
			document.querySelector('#openCamera').addEventListener('click', function() {
				init();
				animate();
				if (navigator.mediaDevices.getUserMedia) {
					//最新标准API
					navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
					console.log("success");
				} else if (navigator.webkitGetUserMedia) {
					//webkit核心浏览器
					navigator.webkitGetUserMedia(constraints, success, error);
				} else if (navigator.mozGetUserMedia) {
					//firefox浏览器
					navigator.mozGetUserMedia(constraints, success, error);
				} else if (navigator.getUserMedia) {
					//旧版API
					navigator.getUserMedia(constraints, success, error);
				}
				//成功回调函数
				function success(stream) {

					// 打开摄像头成功
					// 将视频铺满全屏(简单处理)
					let videoWidth = video.offsetWidth;
					let videoHeight = video.offsetHeight;

					if (window.innerWidth < window.innerHeight) {
						// 竖屏
						if (videoHeight < window.innerHeight) {
							video.setAttribute('height', window.innerHeight.toString() + 'px');
						}
					} else {
						// 横屏
						if (videoWidth < window.innerWidth) {
							video.setAttribute('width', window.innerWidth.toString() + 'px');
						}
					}
					//兼容webkit核心浏览器
					var CompatibleURL = window.URL || window.webkitURL;
					//将视频流转化为video的源
					video.src = CompatibleURL.createObjectURL(stream);
					video.play(); //播放视频
					document.querySelector("#openCamera").hidden = true;
				}

				function error(error) {
					console.log('访问用户媒体失败：', error.name, error.message);
				}
			}, false);



			function init() {
				// 				container = document.createElement( 'div' );
				// 				document.body.appendChild( container );

				camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
				camera.position.z = 250;
				// 				camera.position.z = 500;
				// 				camera.position.y = 400;
				// 				camera.position.x = 400;
				// scene
				scene = new THREE.Scene();
				var ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
				scene.add(ambientLight);
				var pointLight = new THREE.PointLight(0xffffff, 0.8);
				camera.add(pointLight);
				scene.add(camera);
				// model
				var onProgress = function(xhr) {
					if (xhr.lengthComputable) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log(Math.round(percentComplete, 2) + '% downloaded');
						// 						var pg = document.getElementById('pg');
						// 						pg.value = xhr.loaded;
						// 						if (pg.value == 100) {
						// 							pg.style.display = "none";
						// 						}
						var oP = document.getElementById("jindu");
						oP.innerText = Math.round(percentComplete, 2) + '% downloaded';
					}
				};
				var onError = function(xhr) {};
				THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());

				

								new THREE.MTLLoader()
									.setPath('model/')
									.load('1.mtl', function(materials) {
										materials.preload();
										new THREE.OBJLoader()
											.setMaterials(materials)
											.setPath('model/')
											.load('1.obj', function(object) {
												object.position.y = -95;
												//设置模型的初始缩放比例
												// object.scale.setScalar(0.3);
												scene.add(object);
											}, onProgress, onError);
									});
			

        
				renderer = new THREE.WebGLRenderer({
					antialias: true,
					alpha: true
				});
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				// container.appendChild(renderer.domElement);
				document.body.appendChild(renderer.domElement);
				//document.querySelector("#video").appendChild(renderer.domElement);
				document.addEventListener('mousemove', onDocumentMouseMove, false);
				//
				window.addEventListener('resize', onWindowResize, false);
			}

			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth, window.innerHeight);
			}

			function onDocumentMouseMove(event) {
				mouseX = (event.clientX - windowHalfX) / 2;
				mouseY = (event.clientY - windowHalfY) / 2;
			}
			//
			function animate() {
				requestAnimationFrame(animate);
				render();
			}

			function render() {
				camera.position.x += (mouseX - camera.position.x) * .05;
				camera.position.y += (-mouseY - camera.position.y) * .05;
				camera.lookAt(scene.position);
				renderer.render(scene, camera);
			}
		</script>

	</body>
</html>
